/**
 * echarts图表相关基本配置
 */
import { getTransparenColor } from './theme/tool';

// echarts图表基本配置
export const Epitions = {
	color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
	title: {
		text: '',
		textStyle: {
			fontSize: 14
		}
	},
	grid: {
		top: 10,
		left: 10,
		right: 10,
		bottom: 10,
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line'
		},
		backgroundColor: 'rgba(3, 15, 39, 0.8)',
		borderColor: 'rgba(76, 107, 209, 0.5)',
		extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
		textStyle: {
			color: 'rgba(255, 255, 255, 1)'
		}
	}
};

// echarts图表基本配置
export const EXYpitions = {
	...cloneDeep(Epitions),
	xAxis: {
		type: 'category',
		boundaryGap: true,
		axisPointer: {
			handle: {
				show: false
			}
		},
		axisLine: {
			show: true,
			lineStyle: {
				width: 1,
				color: '#747B88'
			}
		},
		axisTick: {
			show: true
		},
		axisLabel: {
			fontSize: 12,

			interval: 'auto'
		}
	},
	yAxis: {
		type: 'value',
		axisLine: {
			show: true,
			lineStyle: {
				width: 1,
				color: '#747B88'
			}
		},
		axisLabel: {
			fontSize: 12,

			interval: 'auto'
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: 'rgba(224,230,241,0.2)',
				type: 'dashed'
			}
		},
		axisTick: {
			show: true
		},
		nameTextStyle: {
			color: '#fff'
		}
	}
};

// echarts图表legend
export const Elegend = {
	orient: 'horizontal',
	itemWidth: 20,
	itemHeight: 8,
	itemGap: 17,
	textStyle: {
		fontSize: 14,
		fontFamily: 'AlibabaPuHuiTi-Medium'
	},
	itemStyle: {
		borderColor: 'transparent'
	}
};

/**
 * 折线图相关配置
 */
export const line = {
	type: 'line',
	yAxisIndex: 0,
	symbol: 'circle',
	symbolSize: 7,
	barWidth: 14,
	splitNumber: 6,
	smooth: true,
	lineStyle: {
		width: 1
	},
	areaStyle: {
		color: {
			type: 'linear',
			x: 0,
			y: 1,
			x2: 0,
			y2: 0,
			colorStops: [
				{
					offset: 0,
					color: 'rgba(0,0,0,0)' // 0% 处的颜色
				},
				{
					offset: 1,
					color: 'rgba(0,0,0,0)' // 0% 处的颜色
				}
			],
			global: false // 缺省为 false
		}
	}
};
/**
 * 折线图series数据处理函数
 * @param {*} data 原始数据 [{x: '01',y1: 135},{x: '02',y1: 75}]
 * @param {*} param1 xAxis x轴的数据key，series数据的名称以及对应的数据key [{ name: '首采区', key: y1 }]
 */
export function lineFn(data, { xAxis, series } = {}, item) {
	const xAxisData = [],
		seriesData = [];

	series.forEach((item, i) => {
		const itemClone = cloneDeep(item);
		delete itemClone.key;
		seriesData.push(
			merge(
				cloneDeep(line),
				{
					areaStyle: {
						color: {
							colorStops: [
								{
									offset: 0,
									color: 'rgba(0,0,0,0)' // 0% 处的颜色
								},
								{
									offset: 1,
									color: getTransparenColor(Epitions.color[i], 0.5) // 100% 处的颜色
								}
							]
						}
					},
					data: []
				},
				itemClone
			)
		);
	});

	data.forEach((item) => {
		if (!xAxisData.includes(item[xAxis])) xAxisData.push(item[xAxis]);
		series.forEach((item2, i2) => {
			seriesData[i2].data.push(item[item2.key]);
		});
	});

	return merge(
		{
			xAxis: {
				data: xAxisData
			},
			series: seriesData
		},
		cloneDeep(EXYpitions),
		item
	);
}

/**
 * 柱状图相关配置
 */
export const bar = {
	type: 'bar',
	barMaxWidth: 25,
	barMinWidth: 5,
	label: {
		show: true,
		position: 'top',
		color: '#fff'
	},
	itemStyle: {
		color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [
				{
					offset: 0,
					color: 'rgba(0,0,0,0)' // 0% 处的颜色
				},
				{
					offset: 1,
					color: 'rgba(0,0,0,0)' // 100% 处的颜色
				}
			]
		},
		borderRadius: [30, 30, 0, 0]
	}
};
/**
 * 折线图series数据处理函数
 * @param {*} data 原始数据 [{x: '01',y1: 135},{x: '02',y1: 75}]
 * @param {*} param1 xAxis x轴的数据key，series数据的名称以及对应的数据key [{ name: '首采区', key: y1 }]
 */
export function barFn(data, { xAxis, series } = {}, item) {
	const xAxisData = [],
		seriesData = [];

	series.forEach((item, i) => {
		const itemClone = cloneDeep(item);
		delete itemClone.key;
		seriesData.push(
			merge(
				cloneDeep(bar),
				{
					itemStyle: {
						color: {
							colorStops: [
								{
									offset: 1,
									color: getTransparenColor(Epitions.color[i], 0) // 0% 处的颜色
								},
								{
									offset: 0,
									color: getTransparenColor(Epitions.color[i], 0.5) // 100% 处的颜色
								}
							]
						}
					},
					data: []
				},
				itemClone
			)
		);
	});

	data.forEach((item) => {
		if (!xAxisData.includes(item[xAxis])) xAxisData.push(item[xAxis]);
		series.forEach((item2, i2) => {
			seriesData[i2].data.push(item[item2.key]);
		});
	});

	return merge(
		{},
		cloneDeep(EXYpitions),
		{
			xAxis: {
				data: xAxisData
			},
			series: seriesData
		},
		item
	);
}

/**
 * 饼图相关配置
 */
export const pie = {
	type: 'pie',
	radius: ['40%', '60%'],
	itemStyle: {
		borderRadius: 10,
		borderColor: 'transparent'
	},
	label: {
		show: false
	},
	labelLine: {
		show: false,
		textBorderColor: 'transparent'
	},
	data: []
};
/**
 * 饼图series数据处理函数
 * @param {*} data 原始数据 [{x: '01',y1: 135},{x: '02',y1: 75}]
 * @param {*} param1  value name 对应的key，默认为 y x
 */
export function pieFn(data, { value = 'y', name = 'x', ...other } = {}, item) {
	const series = cloneDeep(merge({}, pie, other));

	data.forEach((item) => {
		series.data.push({
			value: item[value],
			name: item[name]
		});
	});

	return merge(
		{},
		cloneDeep(Epitions),
		{
			tooltip: {
				trigger: 'item',
				formatter: '{b}：{c} ({d}%)'
			},
			legend: {
				orient: 'horizontal',
				textStyle: {
					fontSize: 14,
					fontFamily: 'AlibabaPuHuiTi-Medium'
				},
				itemStyle: {
					borderColor: 'transparent'
				},
				formatter: function (name) {
					const { value } = series.data.find((item) => item.name == name);
					return `${name}：${value}`;
				}
			},
			series: series
		},
		item
	);
}
